@mixin section()
    display: flex
    justify-content: center

@mixin block()
    max-width: 900px
    text-align: center

@mixin after_title()
    &::after
        content: ''
        width: 263px
        height: 1px
        background: #133955
        position: absolute
        left: 50%
        bottom: -30px
        transform: translateX(-50%)

@mixin description()
    font-size: 18px
    line-height: 1.5
    margin-bottom: 35px

.main
    padding: 146px 0 0 0
    &__welcome
        @include section

        padding: 25px 60px 0
        margin-bottom: 140px
        &_block
            @include block

            &__title
                @include after_title()

                font-size: 48px

                position: relative
                margin-bottom: 75px

            &__description
                @include description
            &__buttons
                display: flex
                justify-content: center
    &__about
        @include section

        margin-bottom: 140px
        &_block
            @include block

            &__title
                @include after_title()

                font-size: 36px

                position: relative
                margin-bottom: 55px

            &__description
                @include description
            &__tech
                display: flex

                justify-content: center
                &_item
                    position: relative
                    width: 56px
                    height: 56px
                    &:not(:last-child)
                        margin-right: 26px
    &__project
        @include section

        flex-direction: column
        align-items: center

        &_info
            @include block

            &__title
                @include after_title()

                font-size: 36px

                position: relative
                margin-bottom: 55px
        &_cards
            display: grid
            grid-template-columns: repeat(2,minmax(327px, 494px))
            grid-auto-rows: 666px

            gap: 113px

.button_projects
    background: #dbdbdb !important
    color: #133955 !important
    margin-right: 61px
    &:hover
        background: #133955 !important
        color: #dbdbdb !important
